<template>
  <div>
    <!-- 图片分享 -->
    <Header></Header>
    <!-- 导航列表 -->

    <van-tabs v-model="active" @click="btn(active)">
      <!-- <van-tab title="全部"> </van-tab> -->
      <van-tab v-for="item in category" :key="item.id" :title="item.title">
        <div class="list">
          <div
            class="list-item"
            v-for="item1 in imge"
            :key="item1.id"
            @click="$router.push(`/photoinfo/${item1.id}`)"
          >
            <van-image width="100%" height="100%" :src="item1.img_url" />
            <div class="list-bd">
              <h3>{{ item1.title }}</h3>
              <p>{{ item1.zhaiyao }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="fixed">
      <van-icon name="back-top" @click="onClickright" />
    </div>
  </div>
</template>

<script>
import { getimages, getimgcategory } from "../api/index";

import Header from "../components/header.vue";
export default {
  data() {
    return {
      active: 0,
      category: [{ title: "全部", id: 0 }],
      imge: [], //图片列表
      show: false,
    };
  },
  components: {
    Header,
  },
  async created() {
    // 图片分类数据
    const { data: res } = await getimgcategory();
    // console.log(res);
    this.category.push(...res.message);
    // console.log(this.category);
    this.btn();
  },
  methods: {
    //   点击列表栏目
    async btn(id) {
      console.log(id);
      const { data: res } = await getimages(0);
      console.log(res);
      this.imge = res.message;
    },
    onClickright() {
      //   console.log(1);

      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.fixed {
  width: 40px;
  height: 40px;
  background-color: red;
  position: fixed;
  right: 10px;
  bottom: 100px;
  .van-icon {
    font-size: 40px;
    color: #fff;
  }
}

.list-item {
  position: relative;
  width: 100vw;
  height: 250px;
  overflow: hidden;
  .van-image {
    margin: 3px 0;
  }
  .list-bd {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid #ccc;
    color: #fff;
    font-size: 14px;
    h3 {
      font-weight: 700;
      font-size: 16px;
    }
  }
}
</style>
